<script setup>
import { ref,computed } from 'vue';
import TeacherChart from '../../components/TeacherChart.vue';
const assignments = ref([
  { title: '数学作业', count: 5 },
  { title: '英语作业', count: 3 },
  { title: '科学作业', count: 4 },
  { title: '历史作业', count: 2 },
]);
</script>
<template>
  <el-main>
    <div class="cards-container">
      <el-card class="card" v-for="(assignment, index) in assignments" :key="index">
        <div class="card-content">
          <h3>{{ assignment.title }}</h3>
          <p>待处理作业数量: {{ assignment.count }}</p>
        </div>
      </el-card>
    </div>
    <TeacherChart />
  </el-main>
</template>
<style scoped>
.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;   /* 卡片之间的间隔 */
  justify-content: center;  /* 居中对齐 */
  padding: 20px; /* 内边距 */
}

.card {
  width: 300px; /* 卡片宽度 */
  border-radius: 10px; /* 圆角 */
  padding: 20px; /* 内边距 */
  background-color: #f4f4f4; /* 背景色 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.card-content {
  text-align: center; /* 内容居中 */
}
</style>
